<template>
  <div class="_wz_sendVehicleNotice">
    <Card dis-hover :bordered="true">
      <template #title>搜索</template>
      <Form ref="formSearch" :model="formDataSearch" label-position="right" :label-width="100" inline>
        <FormItem label="通知标题">
          <i-input v-model="formDataSearch.noticeTitle" placeholder="请输入通知标题" clearable />
        </FormItem>
        <FormItem label="发布状态">
          <i-select v-model="formDataSearch.noticeReleaseState" filterable placeholder="请选择发布状态" clearable>
            <Option value="0">未发布</Option>
            <Option value="1">已发布</Option>
          </i-select>
        </FormItem>
        <FormItem>
          <Button type="primary" @click="searchSubmit">搜索</Button>
        </FormItem>
      </Form>
    </Card>
    <Card dis-hover :bordered="true" style="height: 100%;overflow: hidden;margin: 10px 0 0;">
      <template #title>列表</template>
      <template #extra>
        <Button type="primary" @click="addTableData" style="position: relative;top: -8px;">添加</Button>
      </template>
      <wzTbale ref="wzTbale" :tableData="tableData"></wzTbale>
    </Card>



    <!--    详情-->
    <Drawer :title="formTitle" v-model="formOperation" width="900" :draggable="true">
      <sendVehicleNoticeDetails v-if="formOperation" :selectData="selectData"></sendVehicleNoticeDetails>
    </Drawer>


    <!--    添加-->
    <Drawer :title="formTitle" v-model="formOperationAdd" width="900" :mask-closable="false" :draggable="true" :styles="formOperationStyles">
      <sendVehicleNoticeAdd v-if="formOperationAdd" @closeFun="closeFun" :selectData="selectData"></sendVehicleNoticeAdd>
    </Drawer>

  </div>
</template>
<script>


import {resolveComponent,getCurrentInstance,inject,nextTick,reactive, toRefs,toRef,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted, ref,defineComponent,toRaw,watch} from 'vue'
import { useRouter,useRoute } from "vue-router";

import { useMainStore } from '../../store'  //pinia 使用 类似 vuex
import { storeToRefs } from 'pinia'//pinia 使用 类似 vuex
const mainStore = useMainStore() //pinia 使用 类似 vuex


import wzTbale from "../../components/table/index.vue";
import {systemDictList} from "../../util/commonInterfaces.js";//字典接口
import sendVehicleNoticeDetails from "../cooperate/sendVehicleNoticeDetails.vue";//通知详情
import sendVehicleNoticeAdd from "../cooperate/sendVehicleNoticeAdd.vue";//添加通知

//reactive
export default defineComponent({
  name: 'sendVehicleNotice',//组件名称
  components: {
    wzTbale,//表格
    sendVehicleNoticeDetails,//通知详情
    sendVehicleNoticeAdd,// 添加通知
  },//组件引用
  setup (props,context) {


    const apiUrl = inject('$apiUrl'); // 变量全局化 后台地址
    const $axios = inject('$axiosInterceptor');// 变量全局化 axios
    const $ViewUIPlus = inject('$ViewUIPlus');//引用全局组件
    const router = useRouter();//路由跳转使用

    // 用于获取$refs
    const wzTbale = ref();


    const state = reactive({
      formDataSearch:{},//搜索条件

      tableData: {
        url: apiUrl.noticeVehicleMessageNoticeVehicleMessagePageList,//请求地址
        method: 'post',//请求方式
        where: {},//搜索条件
        height: '100%',//表格高度 auto
        page: true,//分页是否使用
        columns: [//表头数据
          {type: 'index', width: 70, align: 'center', title: '序号'},
          {title: '通知标头', minWidth: 130, key: 'noticeTitle',tooltip:true,resizable: true,},
          {title: '下发数量', minWidth: 130, key: 'noticeAllNumber',tooltip:true,resizable: true,},
          {title: '成功数量', minWidth: 130, key: 'noticeSuccessNumber',tooltip:true,resizable: true,},
          {title: '失败数量', minWidth: 130, key: 'noticeFailNumber',tooltip:true,resizable: true,},
          {title: '通知发布状态', minWidth: 130, key: 'noticeReleaseState',tooltip:true,resizable: true,render: (h, params) => {
              if (params.row.noticeReleaseState == 1) {//已发布
                return h(resolveComponent('Tag'), {type: 'dot',color: 'green'}, '已发布');
              }else {//未发布
                return h(resolveComponent('Tag'), {type: 'dot',color: 'orange'}, '未发布');
              }
            }
          },
          {
            title: '操作', width: 200, fixed: 'right', render: (h, params) => {

              var operationButtons = [];
              if(!params.row.noticeReleaseState){
                operationButtons.push(
                    h('span', { style: {"color": "#2d8cf0", "cursor": "pointer"},
                      onClick:async () => {
                        state.selectData = JSON.parse(JSON.stringify(params.row));
                        state.formTitle = '修改';
                        state.formOperationAdd = true;
                      }
                    }, '修改')
                )
                operationButtons.push(h(resolveComponent('Divider'), {type: 'vertical',}, ''))

                operationButtons.push(
                    h('span', { style: {"color": "#2d8cf0", "cursor": "pointer"},
                      onClick:async () => {
                        $ViewUIPlus.Modal.confirm({
                          title: '发布提醒',
                          content: '是否要发布本条通知信息?',
                          onOk: () => {
                            $ViewUIPlus.Spin.show()
                            $axios.post(apiUrl.noticeVehicleMessageNoticeVehicleMessageRelease,{noticeUuid:params.row.uuid}).then((res) => {
                              $ViewUIPlus.Spin.hide()
                              if (!!res) {
                                $ViewUIPlus.Message.success('发布成功');
                                searchSubmit();
                              }
                            }).catch((err) => {
                              console.log("失败", err)
                            })
                          },
                          onCancel: () => {
                            //点击取消
                          }
                        });
                      }
                    }, '发布')
                )
                operationButtons.push(h(resolveComponent('Divider'), {type: 'vertical',}, ''))
              }

              operationButtons.push(
                  h('span', { style: {"color": "#2d8cf0", "cursor": "pointer"},
                    onClick:async () => {
                      state.selectData = JSON.parse(JSON.stringify(params.row));
                      state.formTitle = '详情';
                      state.formOperation = true;
                    }
                  }, '查看')
              )
              operationButtons.push(h(resolveComponent('Divider'), {type: 'vertical',}, ''))

              operationButtons.push(
                  h('span', { style: {"color": "#2d8cf0", "cursor": "pointer"},
                    onClick:async () => {

                      $ViewUIPlus.Modal.confirm({
                        title: '删除提醒',
                        content: '确定要删除选中的记录？',
                        onOk: () => {
                          $ViewUIPlus.Spin.show()
                          $axios.post(apiUrl.noticeVehicleMessageNoticeVehicleMessageDelete,{uuid:params.row.uuid}).then((res) => {
                            $ViewUIPlus.Spin.hide()
                            if (!!res) {
                              $ViewUIPlus.Message.success('删除成功');
                              searchSubmit();
                            }
                          }).catch((err) => {
                            console.log("失败", err)
                          })

                        },
                        onCancel: () => {
                          //点击取消
                        }
                      });
                    }
                  }, '删除')
              )


              return operationButtons;
            }
          },
        ],
        pagingParameters:{// 分页参数
          page:'pageNo',
          limit:'pageSize'
        },
        format: {//返回数据格式
          list: ['data'],//数据list
          count: ['count'],//数据总量
        },
      },

      selectData:{},//选中数据
      formOperation:false,//弹框状态
      formOperationAdd:false,//弹框状态
      formTitle:'',//弹框标题
      formOperationStyles: {//表单左侧移出css
        height: 'calc(100% - 55px)',
        overflow: 'auto',
        paddingBottom: '53px',
        position: 'static'
      },
    });



    //搜索方法
    const searchSubmit = ()=>{
      let formDataSearch = JSON.parse(JSON.stringify(state.formDataSearch));
      state.tableData.where = formDataSearch;
      wzTbale.value.tableLoadData(true)

    }

    // 添加
    const addTableData = ()=>{
      state.formTitle = '添加';
      state.selectData = {};
      state.formOperationAdd = true;

    }

    //添加修改触发后关闭刷新
    const closeFun = (data) => {
      if (data) {//添加修改 刷新表单
        searchSubmit()
      }
      state.formOperationAdd = false;

    }



    // 其他的生命周期
    onBeforeMount (() => {//beforeMount挂载前状态 // console.log("App ===> 相当于 vue2.x 中 beforeMount")

    })
    onMounted (async() => {//mounted 挂载结束状态  // console.log("App ===> 相当于 vue2.x 中 mounted")

    })

    // 注意，onBeforeUpdate 和 onUpdated 里面不要修改值
    onBeforeUpdate (() => {//beforeUpdate 更新前状态 // console.log("App ===> 相当于 vue2.x 中 beforeUpdate")

    })

    onUpdated (() => {//updated 更新完成状态 // console.log("App ===> 相当于 vue2.x 中 updated")

    })

    onBeforeUnmount (() => {//beforeDestroy 销毁前状态  // console.log("App ===> 相当于 vue2.x 中 beforeDestroy")
    })

    onUnmounted (() => {//destroyed 销毁完成状态  // console.log("App ===> 相当于 vue2.x 中 destroyed")
    })

    return {
      ...toRefs(state),
      searchSubmit,//搜索方法
      wzTbale,// ref 使用 封装的表格
      addTableData,//表单添加
      closeFun,//关闭刷新列表
    }
  }
})


</script>
<style lang="less">
._wz_sendVehicleNotice{
  padding: 10px;
  height: 100%;
  display: flex;
  flex-direction: column;

  .ivu-card-body {
    height: calc(100% - 51px);
  }
}
</style>
